<template>
  <div class="adjustment-body">
    <div class="fb-title">
      <i class="el-icon-s-promotion"></i>
      <span>类别管理</span>
    </div>
    <div id="TypeManage">
      <el-row>
        <el-col :span="4">
          <div class="menu">
            <el-menu class="menu" :default-active="0">
              <el-menu-item v-for="(item, index) in data" :key="index" :index="index" v-on:click.native="getChildClass(item.classId)" v-on:mouseover.native="showList[index] = true" v-on:mouseout.native="showList[index] = false">
                <div>
                  <el-row type="flex" justify="start">
                    <el-col :span="12">
                      <div>
                        <i class="el-icon-star-off"></i>
                        <span slot="title">{{item.className}}</span>
                      </div>
                    </el-col>
                    <el-col :span="5" :offset="2">
                      <div v-if="showList[index]" v-on:click="dialogFormVisibleUpdateP = true">
                        <span class="menu-item-update-font update-item">修改</span>
                      </div>
                    </el-col>
                    <el-col :span="5">
                      <div v-if="showList[index]" v-on:click="open">
                        <span class="menu-item-update-font delete-item">删除</span>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-menu-item>
              <el-menu-item>
                <el-row type="flex" align="middle">
                  <div v-on:click="dialogFormVisibleAddP = true">
                    <i class="el-icon-circle-plus-outline"></i>
                    <span class="menu-item-add-font">添加</span>
                  </div>
                </el-row>
              </el-menu-item>
            </el-menu>
          </div>
        </el-col>
        <el-col :span="20">
          <el-row class="adjustment-type-card">
            <el-col :span="6" v-for="(item, index) in typeList" :key="index" class="adjustment-card">
              <TypeCard :data="item" :parentId="selectP.toString()" :getChildClass="getChildClass"></TypeCard>
            </el-col>
            <el-col :span="6" class="adjustment-card">
              <div class="add-box" v-on:click="dialogFormVisibleAdd = true" v-if="selectP != null">
                <i class="el-icon-circle-plus-outline icon-size"></i>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!--   dialog -->
      <el-dialog title="添加子类别" :visible.sync="dialogFormVisibleAdd" :append-to-body="true">
        <el-row>
          <el-col :span="24">
            <el-form :model="form">
              <el-form-item>
                <el-input v-model="form.insertNameC" autocomplete="off" placeholder="请输入新的子类别" v-on:keydown.enter.native="insertClass"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-dialog>
      <el-dialog title="添加父类别" :visible.sync="dialogFormVisibleAddP" :append-to-body="true">
        <el-row>
          <el-col :span="24">
            <el-form :model="form">
              <el-form-item>
                <el-input v-model="form.insertNameC" autocomplete="off" placeholder="请输入新的父类别" v-on:keydown.enter.native="insertClass(-1)"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-dialog>
      <el-dialog title="修改父类别" :visible.sync="dialogFormVisibleUpdateP" :append-to-body="true">
        <el-row>
          <el-col :span="24">
            <el-form :model="form">
              <el-form-item>
                <el-input v-model="form.updateNameP" autocomplete="off" placeholder="请输入新的父类别" v-on:keydown.enter.native="updateClass()"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import TopA from "./TopA";
import TypeCard from "./TypeCard";
export default {
  name: "TypeManage",
  model:{
    prop: ['data']
  },
  props: {
    data: null,
    getGoodsClass: {
      type: Function,
      default: null
    }
  },
  components: {TypeCard, TopA},
  data() {
    return {
      typeList: null, //二级类别列表
      dialogFormVisibleAdd: false,
      dialogFormVisibleAddP: false,
      dialogFormVisibleUpdateP: false,
      isShow: false,
      form: {
        insertNameC: null,
        updateNameP: null,
        insertNameP: null,
      },
      showList: [],
      selectP: null,
    }
  },
  methods: {
    open(){
      const h = this.$createElement;
      this.$msgbox({
        center: true,
        customClass: "message2",
        message: h('div', null, [
          h('div', {
            class: "alter-status"
          }, "确定删除？"),
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        confirmButtonClass: "message-button",
        cancelButtonText:　'取消',
        cancelButtonClass: "message-button2",
      }).then(action=>{
        this.deleteClass()
      })
    },
    getChildClass: function (classId) {
      this.selectP = classId;
      this.$api.good.getChildClass({
        classId: classId
      }).then(res => {
        console.log("childrenClass", res);
        if (res.data.code === 200) {
          this.typeList = res.data.data;
        }
      })
    },
    showListInit: function () {
      this.showList = [];
      for (let i = 0; i < this.data.length; i ++) {
        this.showList.push(false);
      }
    },
    beforeUpdateClass: function (value) {
      this.dialogFormVisibleUpdateP = true;
    },
    insertClass: function (value) {
      let pid = null;
      if (value === -1) {
        pid = -1;
      } else {
        pid = this.selectP;
      }
      this.$api.good.insertClass({
        parentClass: pid,
        className: this.form.insertNameC
      }).then(res => {
        console.log("insertC", res);
        if (res.data.code === 200) {
          this.$message({
            message: "添加类别成功",
            type: "success"
          });
          this.form.insertNameC = null;
          this.dialogFormVisibleAdd = false;
          this.dialogFormVisibleAddP = false;
          this.getGoodsClass();
          this.getChildClass(this.selectP);
        }
      })
    },
    updateClass: function () {
      this.$api.good.updateClass({
        parentClass: -1,
        classId: this.selectP,
        className: this.form.updateNameP
      }).then(res => {
        console.log("updateClass", res);
        if (res.data.code === 200) {
          this.$message({
            message: "修改父类别成功",
            type: "success"
          });
          this.getGoodsClass();
          this.dialogFormVisibleUpdateP = false;
        }
      })
    },
    deleteClass: function () {
      this.$api.good.deleteClass({
        classId: this.selectP
      }).then(res => {
        console.log("deleteClass", res);
        if (res.data.code === 200) {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.getGoodsClass();
        } else if (res.data.code === 500) {
          this.$message({
            message: "删除失败，存在对应的二级类别",
            type: "warning"
          });
        }
      })
    },
  },
  created() {
    this.showListInit();
  }
}
</script>

<style lang="scss" scoped>
.adjustment-body {
  margin-top: -70px;
}
#TypeManage {
  background: #F8F8FF;
  width: 100%;
  height: 700px;
  border-radius: 25px;
}
.menu {
  height: 700px;
  max-height: 700px;
  overflow: auto;
}
.adjustment-type-card {
  padding: 15px;
}
.add-box {
  background: #BCD2EE;
  width: 260px;
  height: 140px;
  border-radius: 20px;
  cursor: pointer;
}
.add-box:hover {
  background: rgba(188,210,238, 0.8);
}
.icon-size {
  font-size: 60px;
  color: rgba(28, 28, 28, 0.6);
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.icon-size {
  font-size: 60px;
  color: rgba(28, 28, 28, 0.6);
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.menu-item-update-font {
  font-size: 15px;
}
.delete-item {
  color: #9B1A1A;
}
.update-item {
  color: rgba(28, 28, 28, 0.6);
}
.menu-item-add {
  font-size: 30px;
}
.menu-item-add-font {
  font-size: 20px;
  color: #7D7D7D;
}
.adjustment-card {
  padding: 10px;
}
.fb-title {
  font-weight: bold;
  font-size: 36px;
  height: 60px;
  color: rgba(28, 28, 28, 0.6);
  padding-left: 30px;
  padding-top: 30px;
  border-radius: 25px 25px 0 0;
}
>>> .el-menu {
  background: #F0FFFF;
  font-size: 24px;
  border-radius: 25px 0 0 25px;
}
>>> .el-menu-item {
  font-size: 24px;
}
>>> .el-dialog {
  width: 400px;
  border-radius: 25px;
  background: #F0FFFF;
}
>>> .el-dialog__title {
  line-height: 30px;
  font-size: 30px;
  color: rgba(28, 28, 28, 0.6);
  font-weight: bold;
}
>>> .el-dialog__body {
  padding: 20px 40px 0 40px;
}
>>> .el-dialog__header {
  padding: 10px 40px;
  background: rgba(176, 224, 230, 0.8);
  border-radius: 25px 25px 0 0;
}
>>> .el-dialog__close {
  font-size: 30px;
  color: rgba(28, 28, 28, 0.6);
}
>>> .el-col-6 {
  height: auto;
}
</style>
